// 生命周期

import React, { Component, PureComponent } from 'react';
class Life extends PureComponent {
    constructor(props) {
        console.log("创建阶段--生命周期01：constructor")
        super(props);
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        console.log("创建阶段--生命周期02：getDerivedStateFromProps")

        console.log("更新阶段--生命周期01：getDerivedStateFromProps")
        // get获取Derived传入State状态From从Props
        // 需要返回最新的 state
        return prevState
    }
    // shouldComponentUpdate(nextProps, nextState) {
    //     console.log("更新阶段--生命周期02：shouldComponentUpdate", nextProps, nextState)
    //     if (nextState.num === this.state.num) {
    //         return false
    //     } else {
    //         return true
    //     }
    // }

    state = { num: this.props.value }
    render() {
        console.log("更新阶段--生命周期03：render")
        console.log("创建阶段--生命周期03：render ----- 渲染  创建虚拟dom")
        return (<div>
            <button onClick={() => this.setState({ num: this.state.num + 1 })} >{this.state.num}</button>
        </div>);
    }
    componentDidMount() {
        console.log("创建阶段--生命周期04：组件挂载完毕：")
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("更新阶段--生命周期04：getSnapshotBeforeUpdate")
        return { name: "邢帅兵", age: 18 }
    }
    componentDidUpdate(prevProps, prevState) {
        console.log("更新阶段--生命周期05：componentDidUpdate")
    }
    componentWillUnmount() {
        console.log("卸载阶段--生命周期01：componentWillUnmount")
    }
}

export default Life;
// 创建阶段
// 01 counstuctor构造函数  作用:初始化state
// 02 static getDerivedStateFromProps 父组件props更新组件的state 作用:  监听props变化
// 03 render渲染创建虚拟dom 作用:
// 04 componentDidMount组件挂载完毕 作用: ajax，定时器，事件监听，操作dom(需要背诵)
//更新阶段
// 01 static getDerivedStateFromProps 父组件props更新组件的state作用:监听props变化
// 02 shouldcomponentUpdate组件是否需要更新，返回true更新，返回false不更新 作用:优化（需要背诵)
// 03 render
// 04 getSnapshotBeforeUpdate更新前获取快照
// 05 componentDidUpdate组件已经更新完毕
// 卸载阶段
// componentwillUnmount组件将要卸载作用:移除事件监听，移除定时器（需要背诵)
